<script setup lang="ts">
import { watchEffect } from "vue";
import { ref } from "vue"
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const hide=ref(true);
const active = ref(0);
watchEffect(()=>{ 
   if(route.meta.hide){
    hide.value=false
   }else{
    hide.value=true
   }

})

</script>

<template>
  <router-view v-slot="{ Component }">
    <transition enter-active-class="animate__animated animate__fadeInRight"
      leave-active-class="animate__animated animate__fadeInRight">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
  <!--  <router-view/>-->
  <div class="bottom" v-show="hide">
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o"  to="/">主页</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/doctorPage">在线问诊</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/my">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style scoped>
.bottom {
  width: 100%;
  height: 50px;
  background-color: #ffffff;
  z-index: 2;
  position: sticky;
  bottom: 0;
  border-top: 1px solid gainsboro;
  display: flex;
  justify-content: space-around;
  align-items: center;

}

.bottom div {
  text-align: center;
  font-size: 10px;
}

.isLogin {}
</style>
